<template>
  <div class="_flex_column_" style="height: calc(100% - 15px)">
    <div class="_flex_space_between_"
         style="width: 100%;background: #FFFFFF;padding: 18px 24px 0 24px;font-size: 20px;font-weight: 700;">
      <div>自由绘制</div>
      <div style="flex: 1 1 0"></div>
      <a-dropdown :trigger="['click']">

        <a-button type="primary" ghost>新建画布</a-button>

        <template #overlay>

          <a-menu @click="optionSelect_">

            <div v-for="(item,index) in option.addArea">

              <a-menu-item :key="item.key" :disabled="item.disabled">
                {{ item.text }}
              </a-menu-item>

              <a-menu-divider v-if="index < option.addArea.length -1"/>

            </div>

          </a-menu>

        </template>

      </a-dropdown>
    </div>
    <div style="background: #FFFFFF;padding: 18px 24px 16px 24px;font-size: 14px;color: #000000D9">点击 “新建画布” 开始自由绘制，已支持
      矩形 、圆形 、椭圆形 、三角形 、线 、折线 、多边形 、路径。
    </div>
    <!--画布-->
    <div v-if="selectedKey==''" class="_flex_110_"
         style="background: #FFFFFF;border: 1px dashed #000000;margin-top: 24px">
      <canvas id="canvas"/>
    </div>

    <!--      矩形-->
    <FreeDrawRect v-if="selectedKey=='rect'"></FreeDrawRect>

    <!--      圆形 -->
    <FreeDrawCircle v-if="selectedKey=='circle'"></FreeDrawCircle>

    <!--      椭圆形-->
    <FreeDrawEllipse v-if="selectedKey=='ellipse'"></FreeDrawEllipse>

    <!--      三角形 -->
    <FreeDrawTriangle v-if="selectedKey=='triangle'"></FreeDrawTriangle>

    <!--      线-->
    <FreeDrawLine v-if="selectedKey=='line'"></FreeDrawLine>

    <!--      折线-->
    <FreeDrawPolyline v-if="selectedKey=='polyline'"></FreeDrawPolyline>

    <!--      多边形-->
    <FreeDrawPolygon v-if="selectedKey=='polygon'"></FreeDrawPolygon>

    <!--      路径-->
    <FreeDrawPath v-if="selectedKey=='path'"></FreeDrawPath>

    <!--      画笔-->
    <FreeDrawPen v-if="selectedKey=='pen'"></FreeDrawPen>

    <!--      点位+路径-->
    <FreeDrawPonitPath v-if="selectedKey=='pointPath'"></FreeDrawPonitPath>

  </div>
</template>

<script setup>

import {onMounted, ref} from 'vue'
import FreeDrawRect from "@/module/demo/fabricjs/FreeDrawRect.vue";
import FreeDrawCircle from "@/module/demo/fabricjs/FreeDrawCircle.vue";
import FreeDrawEllipse from "@/module/demo/fabricjs/FreeDrawEllipse.vue";
import FreeDrawTriangle from "@/module/demo/fabricjs/FreeDrawTriangle.vue";
import FreeDrawLine from "@/module/demo/fabricjs/FreeDrawLine.vue";
import FreeDrawPolyline from "@/module/demo/fabricjs/FreeDrawPolyline.vue";
import FreeDrawPolygon from "@/module/demo/fabricjs/FreeDrawPolygon.vue";
import FreeDrawPath from "@/module/demo/fabricjs/FreeDrawPath.vue";
import FreeDrawPen from "@/module/demo/fabricjs/FreeDrawPen.vue";
import FreeDrawPonitPath from "@/module/demo/fabricjs/FreeDrawPonitPath.vue";

onMounted(() => {

})

const selectedKey = ref(0)

let option = {
  addArea: [
    {key: 'rect', text: '矩形 (rect)'},
    {key: 'circle', text: '圆形 (circle)'},
    {key: 'ellipse', text: '椭圆形 (ellipse)'},
    {key: 'triangle', text: '三角形 (triangle)'},
    {key: 'line', text: '线 (line)'},
    {key: 'polyline', text: '折线 (polyline)'},
    {key: 'polygon', text: '多边形 (polygon)'},
    {key: 'path', text: '路径 (path)'},
    {key: 'pen', text: '画笔 (path)'},
    {key: 'pointPath', text: '点位+路径 (pointPath)'},
  ]
}

let optionSelect_ = (item) => {
  selectedKey.value = item.key

}


</script>

<style lang="less">
</style>

